<template>
  <div class="context">

    <!-- <el-input v-model="timeMes" placeholder=""></el-input> -->

    <div class="cardheard">

      <div style="margin-right: 15px; width:400px">

        <el-button @click="selectHistory">加载历史订单</el-button>

      </div>
    </div>

    <template>
      <el-table v-model="Users" :data="Users" style="width: 100%" height="80%">
        <el-table-column type="index" width="50">
        </el-table-column>

        <el-table-column label="订单ID">
          <template slot-scope="scope">
            <span>{{ scope.row.orderId }}</span>
          </template>
        </el-table-column>


        <el-table-column label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="充值类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="验证码1">
          <template slot-scope="scope">
            <span>{{ scope.row.code1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="验证码2">
          <template slot-scope="scope">
            <span>{{ scope.row.code2 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="验证码提交时间">
          <template slot-scope="scope">
            <span>{{ scope.row.codeTime }}</span>
          </template>
        </el-table-column>


        <el-table-column label="消息类型">
          <template slot-scope="scope">
            

            <div class="mes" v-if="scope.row.mesType==1">
              <img src="../assets/new.png" alt="" style="width:30px;height:30px">
            </div>
            <div class="mes" v-if="scope.row.mesType==0">
              <img src="../assets/his.png" alt="" style="width:30px;height:30px">
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>



        <audio controls="controls" hidden src="../assets/default.mp3" ref="audio"></audio>


        <el-table-column label="操作" width="300">

          <template slot-scope="scope">
            <!-- <el-button type="text" @click="looknote(scope.$index, scope.row)" size="small">查看</el-button> -->
            <el-button type="text" @click="copyPhone(scope.row)" size="small">复制手机号</el-button>
            <el-button type="text" @click="copyCode1(scope.row)" size="small">复制验证码1</el-button>
            <el-button type="text" @click="copyCode2(scope.row)" size="small">复制验证码2</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
    </template>
  </div>
</template>

<script>
import store from '@/store/'

export default {
  data() {
    return {
      NotifyAudio: '', // 播放的声音
      notifySound: '', // 目前设置的声音
      wsUrl: 'ws://43.136.70.251:8080/websocket/' + store.state.user.userid, // ws地址
      websock: null, // ws实例
      timeMes: "",//实时消息
      Users: [],//用户消息
      phone: "",
      code1: "",
      code2: "",
      parma: ""
    }
  },
  mounted() {
    //初始化websocket
    this.initWebSocket()

  },

  destroyed: function () { // 离开页面生命周期函数
    this.websocketclose();
  },
  methods: {
    selectHistory() {
      var that = this;
      that.$axios
        .post("/api/Mes/show", {
          "pageIndex": 0,
          "pageCount": 100
        })
        .then(function (response) {
          // that.$message.success({
          //   message: "数据已刷新~"
          // });
          that.Users = response.data.data

        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            message: "刷新失败"
          });
        });
    },
    showMes(mes) {
      const h = this.$createElement;
      this.$notify({
        title: '新提醒',
        message: h('i', { style: 'color: teal' }, mes)
      });
    },
    open(mes) {
      this.$message({
        message: '复制成功！' + mes,
        type: 'success'
      });
    },
    copyPhone(row) {
      this.phone = row.phone
      this.copyToClip(this.phone, this.phone)
    },
    copyCode1(row) {
      this.code1 = row.code1
      this.copyToClip(this.code1, this.code1)
    },
    copyCode2(row) {
      this.code2 = row.code2
      this.copyToClip(this.code2, this.code2)
    },
    copyToClip(content, message) {
      var aux = document.createElement("input");
      aux.setAttribute("value", content);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      this.open(message)
    },
    // 初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === 'undefined')
        return console.log('您的浏览器不支持websocket')
      this.websock = new WebSocket(this.wsUrl)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      // 连接建立之后执行send方法发送数据
      let actions = { mes: '来自客户端消息：你好 ' }
      this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror() {
      // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      // 数据接收
      //const redata = JSON.parse(e.data)
      // console.log('接收的数据', redata)
     // this.selectHistory() 
      this.timeMes = e.data
      var flge = 0;
      if (this.timeMes.indexOf("phone") != -1) {

        //判断是否存在相同手机号的记录
        for (let index = 0; index < this.Users.length; index++) {
          if (this.Users[index].orderId == JSON.parse(e.data).orderId) {
            this.Users[index].code1 = JSON.parse(e.data).code1
            this.Users[index].code2 = JSON.parse(e.data).code2
            this.Users[index].mesType = JSON.parse(e.data).mesType
            this.Users[index].codeTime = JSON.parse(e.data).codeTime
            flge = 1
            this.$refs.audio.play(); //播放
            console.log("来新消息了");

          }
        }

        if (flge == 0) {
          this.Users.unshift(JSON.parse(e.data))
          this.$refs.audio.play(); //播放
          console.log("来新消息了");
        }
      }
      this.showMes(e.data)
      console.log(this.Users);


    },
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data)
    },
    websocketclose(e) {
      alert("已从服务器断开！")
      console.log('断开连接', e)
    },
  },
}
</script>
<style scoped>

.mes{
  display: flex;
}
</style>
